<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/reset.css" rel="stylesheet">
    <link href="/dist/css/css3-demos/switch-img/switch-img.css">
</head>
<body>
<div id="app">
    <div class="big box-base" :class="'box'+now">
        <ul>
            <li v-for="item in delayTime"></li>
        </ul>
    </div>
    <div class="big" :class="[{'box-top':addClass},'box'+now]">
        <ul>
            <li v-for="item in delayTime" :style="{'transition-delay':+(item/1000)+'s' }"></li>
        </ul>
    </div>
</div>

</body>
<script src="../../vue-demos/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            delayTime: [],
            addClass: true,
            now: 1
        },
        mounted: function () {
            for (var i = 0; i < 100; i++) {
                this.delayTime.push(i * 10);
            }
            this.delayTime.sort(function () {
                return Math.random() - 0.5
            });
            setInterval(()=>{
                this.addClass=true;
                this.delayTime.sort(function () {
                    return Math.random() - 0.5
                });
                if(this.now===5){
                    this.now=1
            }
            else{
                    this.now++;
            }
            },3000)
        }
    })
</script>
</html>